<template>
  <el-card style="margin-bottom: 7px" :body-style="{ padding: '3px' }" shadow="hover">
  <div class="hotBlog">
    <el-link :underline="false" @click="gotoOneBlog">
      <img :src="hotBlogItem.img" height="70px" width="124px" style="display: block;">
    </el-link>
    <div class="blogTitle">
      <el-link :underline="false" @click="gotoOneBlog">
        <h3 style="margin-top: -2px;">{{hotBlogItem.title}}</h3>
      </el-link>
    </div>
  </div>
  </el-card>
</template>

<script>
export default {
  name: "myIndexHotBlog",
  props: {
    hotBlogItem: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
  },
  methods:{
    gotoOneBlog(){
      this.$router.push({ name: 'oneBlog', params: { blogId: this.hotBlogItem.blogId }});
    },
  }
}
</script>

<style scoped>
.hotBlog{
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 70px;
}
.blogTitle{
  margin-left: 10px;
}
</style>
